<script setup>
import Tooltip from '../common/Tooltip.vue'

const props = defineProps({
  node: {
    type: Object,
    required: true
  },
  expandedFolders: {
    type: Set,
    required: true
  },
  isSearchMode: {
    type: Boolean,
    default: false
  },
  getFileIcon: {
    type: Function,
    required: true
  },
  formatFileSize: {
    type: Function,
    required: true
  },
  formatDate: {
    type: Function,
    required: true
  }
})

const emit = defineEmits(['click', 'double-click', 'show-in-explorer', 'toggle'])

const isExpanded = (node) => {
  return props.expandedFolders.has(node.path)
}

const handleToggle = (node) => {
  emit('toggle', node)
}

const handleClick = (node) => {
  emit('click', node)
}

const handleDoubleClick = (node) => {
  emit('double-click', node)
}

const handleShowInExplorer = (node) => {
  emit('show-in-explorer', node)
}
</script>

<template>
  <div class="tree-node" :class="{ 'expanded': isExpanded(node) }">
    <div 
      class="node-content"
      :class="{ 'is-directory': node.isDir }"
      @click="handleClick(node)"
      @dblclick="handleDoubleClick(node)"
      @contextmenu.prevent="handleShowInExplorer(node)"
    >
      <!-- 展开/折叠图标 -->
      <div 
        v-if="node.isDir && node.children && node.children.length > 0" 
        class="expand-icon"
        @click.stop="handleToggle(node)"
      >
        <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
          <path v-if="isExpanded(node)" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
          <path v-else d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
        </svg>
      </div>
      <div v-else class="expand-placeholder"></div>
      
      <!-- 文件/文件夹图标 -->
      <div class="node-icon">
        <svg v-if="getFileIcon(node) === 'folder'" class="icon" viewBox="0 0 24 24" fill="currentColor">
          <path d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z" />
        </svg>
        <svg v-else-if="getFileIcon(node) === 'folder-open'" class="icon" viewBox="0 0 24 24" fill="currentColor">
          <path d="M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z" />
        </svg>
        <svg v-else-if="getFileIcon(node) === 'file-code'" class="icon" viewBox="0 0 24 24" fill="currentColor">
          <path d="M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z" />
        </svg>
        <svg v-else-if="getFileIcon(node) === 'file-image'" class="icon" viewBox="0 0 24 24" fill="currentColor">
          <path d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" />
        </svg>
        <svg v-else-if="getFileIcon(node) === 'file-video'" class="icon" viewBox="0 0 24 24" fill="currentColor">
          <path d="M17,10.5V7A1,1 0 0,0 16,6H4A1,1 0 0,0 3,7V17A1,1 0 0,0 4,18H16A1,1 0 0,0 17,17V13.5L21,17.5V6.5L17,10.5Z" />
        </svg>
        <svg v-else-if="getFileIcon(node) === 'file-audio'" class="icon" viewBox="0 0 24 24" fill="currentColor">
          <path d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z" />
        </svg>
        <svg v-else-if="getFileIcon(node) === 'file-pdf'" class="icon" viewBox="0 0 24 24" fill="currentColor">
          <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
        </svg>
        <svg v-else-if="getFileIcon(node) === 'file-archive'" class="icon" viewBox="0 0 24 24" fill="currentColor">
          <path d="M14,17H12V15H10V13H12V15H14M14,9H12V7H10V9H12V11H10V13H12V11H14M12,3V5H10V7H12V5H14V3M20,6H16V4H20M4,4H8V6H4M4,8H8V10H4M16,6H20V8H16M4,12H8V14H4M16,8H20V10H16M4,16H8V18H4M16,10H20V12H16M4,20H8V22H4M16,12H20V14H16M8,20H16V22H8M16,14H20V16H16M8,18H16V20H8M16,16H20V18H16M8,16H16V18H8M8,14H16V16H8M8,12H16V14H8M8,10H16V12H8M8,8H16V10H8M8,6H16V8H8M8,4H16V6H8M8,2H16V4H8" />
        </svg>
        <svg v-else class="icon" viewBox="0 0 24 24" fill="currentColor">
          <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
        </svg>
      </div>
      
      <!-- 文件信息 -->
      <div class="node-info">
        <Tooltip :file-info="node">
          <div class="node-name">{{ node.name }}</div>
        </Tooltip>
      </div>
    </div>
    
    <!-- 子节点 -->
    <div v-if="node.isDir && isExpanded(node) && node.children" class="children">
      <FileTreeNode
        v-for="child in node.children"
        :key="child.path"
        :node="child"
        :expanded-folders="expandedFolders"
        :is-search-mode="isSearchMode"
        :get-file-icon="getFileIcon"
        :format-file-size="formatFileSize"
        :format-date="formatDate"
        @click="handleClick"
        @double-click="handleDoubleClick"
        @show-in-explorer="handleShowInExplorer"
        @toggle="handleToggle"
      />
    </div>
  </div>
</template>

<style scoped>
.tree-node {
  user-select: none;
}

.node-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-radius: 4px;
  margin: 1px 0;
}

.node-content:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.05));
}

.node-content.is-directory {
  font-weight: 500;
}

.expand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  cursor: pointer;
  border-radius: 2px;
  transition: background-color 0.2s ease;
}

.expand-icon:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.1));
}

.expand-placeholder {
  width: 16px;
  height: 16px;
}

.node-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.icon {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.node-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.node-name {
  font-size: 14px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  width: 100%;
}

.children {
  margin-left: 24px;
  border-left: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
  padding-left: 8px;
}

/* 深色主题支持 */
.dark-theme .node-content:hover {
  background: rgba(255, 255, 255, 0.05);
}

.dark-theme .expand-icon:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dark-theme .children {
  border-left-color: rgba(255, 255, 255, 0.1);
}
</style>